<template>
  <!-- 分类标签容器 -->
  <div class="category-tabs">
    <!-- 包裹标签容器，例如推荐 -->
     <div class="tabs-container">
              <!-- 循环渲染每个分类标签 -->
      <!-- v-for指令：循环渲染数组中的每个元素 -->
      <!--  -->
      <div 
        v-for="category in categories" 
        :key="category"
        class="tab-item"
        :class="{ active: category === activeCategory }"
        @click="handleTabClick(category)"
      >
        {{ category }}
      </div>
     </div>
  </div>

</template>

<script>
// 定义组件的props（属性）- 父组件传递的数据
const props = defineProps({
  // 分类数组 - 包含所有可用的分类
  categories: {
    type: Array,           // 类型为数组
    required: true        // 必传属性，父组件必须传递
  },
  // 当前激活的分类 - 用于高亮显示
  activeCategory: {
    type: String,         // 类型为字符串
    required: true        // 必传属性，父组件必须传递
  }
})
</script>


<style scoped>

</style>